<template>
  <scroll-view
    enable-back-to-top
    scroll-y
    :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="getMeetingList"
  >
    <view>
      <u-navbar
        :placeholder="true"
        :titleStyle="{ color: '#ffffff' }"
        leftIconColor="#ffffff"
        bgColor="#3775cb"
        :autoBack="true"
      >
      </u-navbar>


      <view style="margin-top: 20rpx" v-for="(item, index) in meetingList" :key="index">
        <uni-card>
          <template v-slot:title>
            <view class="icons-text card-title">
              <text class="icons">
                <image mode="aspectFill" class="image" src="@/static/icons/video.png"></image>
              </text>
              <text class="text">线下会议</text>
            </view>
          </template>
          <view class="card-body" @tap="onPopupShow(item)">
            <text>{{ item?.title }}</text>
            <view class="icons-text">
              <text class="icons">
                <image mode="aspectFill" class="image" src="@/static/icons/todo.png"></image>
              </text>
              <text class="text">{{ item?.startTime + ' 至 ' + item?.endTime }}</text>
            </view>
            <view class="icons-text">
              <text class="icons">
                <text>
                  <u-icon name="map-fill" color="#3775cb" size="14"></u-icon>
                </text>
              </text>
              <text class="text">{{ item?.location }}</text>
            </view>
            <view
              style="margin-bottom: 20rpx"
              class="icons-text"
              v-for="(cus, i) in item?.meetingParticipantVoList"
              :key="i"
            >
              <text v-if="cus?.participantType === '1'">
                <text class="icons">
                  <image
                    mode="aspectFill"
                    class="image"
                    :src="
                      cus?.participantObject?.avatarUrl
                        ? cus?.participantObject?.avatarUrl
                        : '/static/icons/avatar.png'
                    "
                  ></image>
                </text>
                <text class="text">{{ cus?.participantObject?.name }}</text>
                <text class="icons">
                  <image mode="aspectFill" class="image" src="@/static/icons/customer.png"></image>
                </text>
              </text>
              <text v-if="cus?.participantType === '10'">
                <text class="icons">
                  <image
                    mode="aspectFill"
                    class="image"
                    :src="
                      cus?.participantObject?.avatarUrl
                        ? cus?.participantObject?.avatarUrl
                        : '/static/icons/avatar.png'
                    "
                  ></image>
                </text>
                <text style="color: #35496b" class="text">{{
                    cus?.participantObject?.nickName
                  }}
                </text>
                <text class="icons">
                  <image mode="aspectFill" class="image" src="@/static/icons/user.png"></image>
                </text>
              </text>
            </view>
          </view>
          <view style="text-align: right; color: red" @click="handleRemove(item)"> 删除</view>
        </uni-card>
      </view>
      <u-empty v-show="isFinish && meetingList.length === 0" mode="history"/>
      <u-loadmore v-if="isLoading" status="loading"/>
      <u-loadmore v-if="isFinish && meetingList.length > 0" status="nomore"/>
      <view
        @click="openAdd"
        style="
          position: fixed;
          width: 80rpx;
          height: 80rpx;
          background-color: rgba(55, 117, 203, 0.47);
          bottom: 350rpx;
          right: 0;
          border-radius: 50rpx 0 0 50rpx;
          padding: 12rpx 15rpx;
        "
      >
        <u-icon name="plus-circle" color="#3775cb" size="30"></u-icon>
      </view>
      <u-popup :show="popupShow" :round="10" @close="popupShow = false">
        <view style="max-height: 60vh; overflow: auto; margin-top: 20rpx">
          <view class="list">
            <uni-list>
              <uni-list :border="true">
                <uni-list-chat
                  v-for="(cus, index) in meetingParticipantVoList"
                  :key="index"
                  :title="
                  cus?.participantType === '1'
                    ? cus?.participantObject?.name
                    : cus?.participantObject?.nickName
                "
                  :avatar="
                  cus?.participantObject?.avatarUrl
                    ? cus?.participantObject?.avatarUrl
                    : '/static/icons/avatar.png'
                "
                  badge-positon="left"
                >
                  <view class="chat-custom-right">
                    <view @click="clickUserProfile(cus)" style="margin-top: 14rpx">
                      <image
                        style="width: 50rpx"
                        class="slot-image"
                        :src="
                        cus?.participantObject?.type === '1'
                          ? '/static/icons/WeChat.png'
                          : '/static/icons/wecom.png'
                      "
                        mode="widthFix"
                      ></image>
                    </view>
                  </view>
                </uni-list-chat>
              </uni-list>
            </uni-list>
          </view>
        </view>
      </u-popup>
    </view>
  </scroll-view>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { deleteMeetingAPI, getMeetingListAPI } from '@/services/meeting'
import * as ww from '@wecom/jssdk'
import { OpenUserProfileType } from '@wecom/jssdk'
import { createJsapiSignatureAPI } from '@/services/common'
import {onShow} from "@dcloudio/uni-app";
import {registerApi} from "@/utils/wecom";

const props = defineProps<{
  customerId: string
}>()
// 请求参数
const queryParams=ref<any> ( {
  customerId: props.customerId,
  pageNum: 1,
  pageSize: 10,
})
const popupShow = ref<boolean>(false)
const meetingParticipantVoList = ref<any[]>([])
const isFinish = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)
// 获取订单列表
const meetingList = ref<any[]>([])
// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  queryParams.value.page = 1
  meetingList.value = []
  isFinish.value = false
  // 加载数据
  await getMeetingList()
  // 关闭动画
  isTriggered.value = false
}
const getMeetingList = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinish.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getMeetingListAPI(queryParams.value)
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  meetingList.value.push(...res.rows)
  // 分页条件
  if (meetingList.value.length < res.total) {
    // 页码累加
    queryParams.value.pageNum++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}
const openAdd = async () => {
  uni.navigateTo({
    url: '/pagesTodo/meeting/meetingForm',
  })
}

const handleRemove = async (row: any) => {
  uni.showModal({
    content: '是否删除',
    confirmColor: '#e51010',
    success: async (res) => {
      if (res.confirm) {
        await deleteMeetingAPI(row.meetingId)
        meetingList.value = meetingList.value.filter((item) => item?.meetingId !== row.meetingId)
      }
    },
  })
}

const clickUserProfile = (row: any) => {
  for (const key in meetingList.value) {
    if (meetingList.value[key]['meetingId'] === row['meetingId']) {
      meetingParticipantVoList.value = meetingList.value[key]['meetingParticipantVoList']
    }
  }
  if (row?.participantType === '1') {
    ww.openUserProfile({
      type: OpenUserProfileType.external,
      userid: row?.participantObject?.qwExternalUserid,
    })
  } else {
    ww.openUserProfile({
      type: OpenUserProfileType.internal,
      userid: row?.participantObject?.userName,
    })
  }
}

const onPopupShow = (row: any) => {
  for (const key in meetingList.value) {
    if (meetingList.value[key]['meetingId'] === row['meetingId']) {
      meetingParticipantVoList.value = meetingList.value[key]['meetingParticipantVoList']
    }
  }
  popupShow.value = true
}

// 组件挂载完毕
onMounted(async () => {
  getMeetingList()
})

onShow(async () => {
  registerApi(['openUserProfile'])
})

</script>

<style lang="scss" scoped>
page {
  background-color: #f7f7f7;
  height: 100%;
}
.icons-text {
  display: flex;
  align-items: center;
  line-height: 1;
  margin-top: 10rpx;
  color: #666;

  .icons {
    color: #3775cb;
    padding: 6rpx 5rpx 7rpx 0;
    .image {
      width: 26rpx;
      height: 26rpx;
    }
  }
}
.card-title {
  font-size: 28rpx;
}
.card-body {
  padding-left: 18rpx;
}
</style>
